<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-1.7.2.js"></script>
</head>
<body>
<style>
    #tab_change {
        width: 300px;
        height: 150px;
        display: block;
    }
    #tab_change ul {
        width: 100%;
        height: 100%;
        display: block;
    }
    #tab_change ul li {
        width: 100px;
        height: 100%;
        float: left;
        list-style: none;
    }
    #tab_change li em {
        width: 30px;
        height: 30px;
        display: block;
        background-color: lightskyblue;
        font-size: 14px;
        text-align: center;
        line-height: 30px;
        font-style: normal;
        color: #fff;
    }
    #tab_change li.curr em {
        width: 60px;
        height: 60px;
        line-height: 60px;
    }
</style>
<div id="tab_change">
    <ul>
        <li class="curr"><em>小米</em></li>
        <li><em>魅族</em></li>
        <li><em>三桑</em></li>
    </ul>
</div>
<script>
$(function(){
          $("#tab_change li").each(function(i){
                $(this).click(function(){
                    $("#tab_change li").removeClass("curr").eq(i).addClass("curr");
//                        $(".cnt").hide().eq(i).show();
                        return false;  //防止a跳转；
                })
            })
})
</script>
</body>
</html>